﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="netnr,NET牛人,zidian,字典" />
    <meta name="description" content="netnr,NET牛人,zidian,字典" />

    <title>字典</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href="https://ss.netnr.com/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/app/md/dist/netnrmd.css" rel="stylesheet" />
</head>

<body>

    <div class="container-fluid">
        <div class="row mt-3">
            <div class="col-sm-auto mb-3">
                <div class="input-group">
                    <span class="input-group-text">汉字</span>
                    <input class="form-control" id="txt1" placeholder="汉字，如：爱" maxlength="1" />
                </div>
            </div>
            <div class="col-sm-auto mb-3">
                <div class="input-group">
                    <span class="input-group-text">词语</span>
                    <input class="form-control" id="txt2" placeholder="词语，如：美丽" maxlength="20" />
                </div>
            </div>
            <div class="col-sm-auto mb-3">
                <div class="input-group">
                    <span class="input-group-text">成语</span>
                    <input class="form-control" id="txt3" placeholder="成语，如：一言既出，驷马难追" maxlength="20" />
                </div>
            </div>
            <div class="col-sm-auto mb-3">
                <div class="input-group">
                    <span class="input-group-text">词语搜索</span>
                    <input class="form-control" id="txt4" placeholder="词语关键字" maxlength="20" />
                </div>
            </div>
            <div class="col-sm-auto mb-3">
                <div class="input-group">
                    <span class="input-group-text">成语搜索</span>
                    <input class="form-control" id="txt5" placeholder="成语关键字" maxlength="20" />
                </div>
            </div>
            <div class="col-sm-12 mb-3">
                <textarea id="res" class="form-control w-100" rows="20" placeholder="输出结果"></textarea>
            </div>
        </div>

        <div class="row my-5">
            <div class="col-sm-12 markdown-body">

                <h1 id="toc_0">zidian 字典</h1>
                <p>汉字、词语、成语查询接口</p>
                <h3 id="toc_1">引言</h3>
                <ul>
                    <li>源数据 <a href="https://github.com/pwxcoo/chinese-xinhua">https://github.com/pwxcoo/chinese-xinhua</a></li>
                    <li>源数据是一个 <code>JSON</code> 文件，大小超出 <code>20M</code>，不利于页面加载使用，所以拆分了文件</li>
                    <li>提取字、词、成语为数组，根据数组索引分页生成详情，具体请看 <code>build.html</code> 的拆分脚本</li>
                </ul>
                <h3 id="toc_2">使用</h3>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ss.netnr.com/zidian@0.0.3/dist/zidian.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
                <p>查看 <a href="https://www.npmjs.com/package/zidian">https://www.npmjs.com/package/zidian</a><br>拉取 <code>npm install zidian</code></p>
                <p>汉字查询</p>
<pre><code class="hljs language-js">zidian.<span class="hljs-property">equalWord</span> (key)
zidian.<span class="hljs-property">equalWord</span> (<span class="hljs-string">"爱"</span>).<span class="hljs-property">then</span> (<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
                <p>词语查询</p>
<pre><code class="hljs language-js">zidian.<span class="hljs-property">equalCi</span> (key)
zidian.<span class="hljs-property">equalCi</span> (<span class="hljs-string">"美丽"</span>).<span class="hljs-property">then</span> (<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
                <p>成语查询</p>
<pre><code class="hljs language-js">zidian.<span class="hljs-property">equalIdiom</span> (key)
zidian.<span class="hljs-property">equalIdiom</span> (<span class="hljs-string">"叶公好龙"</span>).<span class="hljs-property">then</span> (<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
                <p>词语模糊搜索</p>
<pre><code class="hljs language-js">zidian.<span class="hljs-property">likeCi</span> (key)
zidian.<span class="hljs-property">likeCi</span> (<span class="hljs-string">"美"</span>).<span class="hljs-property">then</span> (<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
                <p>成语模糊搜索</p>
<pre><code class="hljs language-js">zidian.<span class="hljs-property">likeIdiom</span> (key)
zidian.<span class="hljs-property">likeIdiom</span> (<span class="hljs-string">"三百"</span>).<span class="hljs-property">then</span> (<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
                <h3 id="toc_3">说明</h3>
                <ul>
                    <li>接口查询返回一个  <code>Promise</code>  对象</li>
                    <li>查询的接口会缓存到 <code>zidian.cache</code> 对象</li>
                    <li>查询无记录时，返回 <code>null</code></li>
                    <li><code>zidian.config.host</code> 可配置请求源</li>
                </ul>

            </div>
        </div>
    </div>

    <script src="zidian.js?20220224"></script>

    <script>
        function iszhcn(s) {
            return escape(s).indexOf("%u") >= 0;
        }

        zidian.config.host = "https://ss.netnr.com/zidian@0.0.3/";

        var res = document.getElementById('res');

        document.getElementById('txt1').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key[0])) {
                res.value = "Loading ...";
                zidian.equalWord(key[0]).then(function (info) {
                    if (info) {
                        var txts = [];
                        for (var i in info) {
                            var txt = info[i];
                            if (txt.includes('\n')) {
                                txts.push(`【${i}】：\n${txt}`);
                            } else {
                                txts.push(`【${i}】：${txt}`);
                            }
                        }
                        res.value = txts.join('\n');
                    } else {
                        res.value = "无记录";
                    }
                })
            } else {
                res.value = "请输入中文";
            }
        }, false);

        document.getElementById('txt2').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                res.value = "Loading ...";
                zidian.equalCi(key).then(function (info) {
                    res.value = info ? info.explanation : "无记录";
                })
            } else {
                res.value = "请输入一个词语";
            }
        }, false);

        document.getElementById('txt3').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                res.value = "Loading ...";
                zidian.equalIdiom(key).then(function (info) {
                    if (info) {
                        var txts = [];
                        for (var i in info) {
                            var txt = info[i];
                            if (txt.includes('\n')) {
                                txts.push(`【${i}】：\n${txt}`);
                            } else {
                                txts.push(`【${i}】：${txt}`);
                            }
                        }
                        res.value = txts.join('\n');
                    } else {
                        res.value = "无记录";
                    }
                })
            } else {
                res.value = "请输入一个成语";
            }
        }, false);

        document.getElementById('txt4').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                res.value = "Loading ...";
                zidian.likeCi(key).then(function (info) {
                    res.value = info.length ? info.join('\n') : "无记录";
                })
            } else {
                res.value = "请输入一个词语的关键字";
            }
        }, false);

        document.getElementById('txt5').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                res.value = "Loading ...";
                zidian.likeIdiom(key).then(function (info) {
                    res.value = info.length ? info.join('\n') : "无记录";
                })
            } else {
                res.value = "请输入一个成语的关键字";
            }
        }, false);
    </script>

</body>

</html>